<template>
  <div>
    <!-- 
        语法： v-bind: 属性名="vue中定义的变量/表达式"
        简化的语法： 将v-bind：转化为 : => :属性名="vue中定义的变量/表达式"
     -->
     <!-- <a href="http://www.baidu.com">www.baidu.com</a> -->
     <a v-bind:href="hrefUrl">www.baidu.com</a>
     <br>
     <!-- 关于v-bind动态属性作用于图片时尤其需要注意 -->
     <!-- v-bind 会直接将资源路径认定为字符串 -->
     <!-- v-bind 的缩写：直接写冒号(:) -->
     <img src="../assets/456.png">
     <br>
     <img v-bind:src="imgUrl1">
     <br>
     <img v-bind:src="imgUrl2">
     <br>
     <img :src="imgUrl3">
  </div>
</template>

<script>
// 通过import引入资源文件，在data中进行定义，最后再动态属性中使用
import img from '../assets/456.png'
export default {
    name: 'DemoIndex2',
    data() {
        return {
            hrefUrl: 'http://www.baidu.com',
            imgUrl1: '../assets/456.png', // 这种不行
            imgUrl2: img,
            // require 引入资源文件，直接在动态属性中使用
            // 优势：require 引入资源的方式是按需的，这样一来，页面初始更新效率会更高
            imgUrl3: require('../assets/456.png')
        }
    },
}
</script>

<style>

</style>